<template>
    <base-dialog v-bind="$attrs" v-on="$listeners" :title="title" size="tiny" @submit="toAdd">
        <el-form ref="elForm" label-width="80px" :model="formData" :rules="rules">
            <el-form-item label="名称" prop="title">
                <el-input v-model="formData.title"></el-input>
            </el-form-item>
            <el-form-item label="归属部门" prop="dept_id">
                <dept-select-tree v-model="formData.dept_id" placeholder="请选择部门" clearable
                                  :style="{width: '100%'}"
                                  :disable-branch-nodes="true" @select="getDeptName"></dept-select-tree>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="formData.phone"></el-input>
            </el-form-item>
<!--            <el-form-item label="是否启用" prop="status">-->
<!--                <el-radio-group v-model="formData.status">-->
<!--                    <el-radio-->
<!--                            v-for="(item, index) in statusOptions"-->
<!--                            :key="index"-->
<!--                            :label="item.value"-->
<!--                            :disabled="item.disabled"-->
<!--                    >{{ item.label }}-->
<!--                    </el-radio>-->
<!--                </el-radio-group>-->
<!--            </el-form-item>-->
        </el-form>
    </base-dialog>
</template>
<script>
    import BaseDialog from "@/components/Common/BaseDialog";
    import DetailDialog from "@/mixins/DetailDialog";
    import DeptSelectTree from "../../components/Common/DeptSelectTree";

    export default {
        name: "DetailDialog",
        mixins: [DetailDialog],
        data() {
            return {
                apiUrl:"addressBook/useful",
                formData: {
                    title: "",
                    no_order: 1,
                    dept_id: undefined,//必填
                    dept_name: "",//必填
                    phone: "",//必填
                    status: true, //是否启用 非必填
                },
                rules: {
                    title: [
                        {required: true, message: "名称不能为空", trigger: "blur"}
                    ],
                    dept_id: [
                        {required: true, message: "部门不能为空", trigger: "change"}
                    ],
                    phone: [
                        {required: true, message: "手机不能为空", trigger: "blur"}
                    ],
                },
                categoryList: [],
                rolelist: [],
                statusOptions: [
                    {
                        label: "是",
                        value: true
                    },
                    {
                        label: "否",
                        value: false
                    }
                ],
            }
        },
        created() {
        },
        components: {DeptSelectTree, BaseDialog},
        computed: {
            title() {
                return "新增常用电话"
            },
        },
        methods: {
            getDeptName(node){
                this.formData.dept_name=node.name
            }
        }
    }
</script>
